<template>
  <div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

    <div style="display: flex; grid-gap: 10px ; margin-bottom: 10px">
      <div class="card" style="padding: 10px; flex: 1 ; height: 400px" id="bar"></div>
      <div class="card" style="padding: 10px; flex: 1 ; height: 400px" id="line"></div>
    </div>

    <div style="display: flex; grid-gap: 10px; ">
      <div class="card" style="padding: 10px; width: 50% ; height: 400px" id="pie"></div>
      <div class="card" style="padding: 10px; width: 50% ; height: 400px" id="pie"></div>
    </div>


  </div>

</template>


<script setup>
import {reactive,onMounted} from "vue";
import * as echarts from 'echarts';
import request from "@/utils/request.js";

const barOption = {
  title: {
    text: '各部门员工数'
  },
  tooltip: {},
  legend: {
    trigger: 'item'
    //data: ['人数']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '人数',
      type: 'bar',
      data: [],
      //非必须，用来调色
      itemStyle: {
        normal: {
          color: function (params) {
            let colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4','#ea7ccc'];
            return colors[params.dataIndex % colors.length];
          }
        }
      }
    },
  ]
};

const lineOption = {
  title: {
    text: '近七天发布文章数量'
  },
  tooltip: {},
  legend: {
    trigger:'item'
    //data: ['文章数量']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '发布数量',
      type: 'line',
      data: [],
      smooth:true,
    },
  ]
};

const pieOption = {
  title: {
    text: '各部门员工数',
    //subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '员工数量',
      type: 'pie',
      radius: '50%',
      data: [],
      //center: ['50%', '25%'], //调节饼图位置，前面调左右，后面调上下，可去
      label: {
        formatter: '{b}: {@2012} ({d}%)'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};




//onMounted 表示页面所有dom元素都初始化完成
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const barChart = echarts.init(document.getElementById('bar'));
  request.get('/barData').then(res =>{
    barOption.xAxis.data = res.data.department  //横轴数据
    barOption.series[0].data = res.data.count   //纵轴数据
    // 使用刚指定的配置项和数据显示图表。
    barChart.setOption(barOption);
  })

  // 基于准备好的dom，初始化echarts实例
  const lineChart = echarts.init(document.getElementById('line'));
  request.get('/lineData').then(res =>{
    lineOption.xAxis.data = res.data.date  //横轴数据
    lineOption.series[0].data = res.data.count   //纵轴数据
    // 使用刚指定的配置项和数据显示图表。
    lineChart.setOption(lineOption);
  })

  // 基于准备好的dom，初始化echarts实例
  const pieChart = echarts.init(document.getElementById('pie'));
  request.get('/pieData').then(res =>{
    pieOption.series[0].data = res.data   //饼图没有x轴
    // 使用刚指定的配置项和数据显示图表。
    pieChart.setOption(pieOption);
  })

})

</script>

<style scoped>


</style>